// 推送记录
<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px;"
				@clickRight="showSetUp"
				@clickLeft="goHome"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#FBFBFF"
			>
				<!-- <view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view> -->
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#9F9F9F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ paddingTop: topBar }">
			<view class="titleBoxTopTitle">การแจ้งเตือน</view>
			<!-- 标题 -->
			<view class="titleBox">
				<view class="titleBoxcenter" :class="item.show ? 'titleBoxcenterClick' : ''" @click="titleBar(item)" v-for="item in titleLst" :key="item.id">
					<uni-badge style="width: 100%; height: 100%;" :text="item.num" type="error" absolute="rightTop" :offset="[10, 2]" size="small">
						<view class="titleBoxcenterTitle">
							<image style="width: 25px; height: 20px; margin-right: 10px;" :src="item.img" mode=""></image>
							<view>{{ item.title }}</view>
						</view>
					</uni-badge>
				</view>
			</view>
			<!-- 付款 -->
			<!-- 			<view class="paymentBox" v-show="titleLst[2].show">
				<view class="paymentBoxCenter" :class="item.show ? 'paymentBoxCenterClick' : ''" @click="paymentBoxBar(item)" v-for="item in paymentBoxleLst" :key="item.id">
					<uni-badge style="width: 100%; height: 100%;" :text="item.num" type="primary" absolute="rightTop" :offset="[10, 2]" size="small">
						<view>{{ item.title }}</view>
					</uni-badge>
				</view>
			</view> -->
			<!-- 内容 -->
			<uni-list :border="false" class="listBigBox" :style="{ height: topBarTwo }">
				<view class="loadingBox" v-if="loading"><uni-load-more color="#333" :showText="false" status="loading"></uni-load-more></view>
				<uni-list-item v-else class="listBox" :style="{ backgroundColor: item.read ? '#FFEDEF' : '#EBF1FB' }" v-for="(item, index) in cardArrList" :key="index">
					<!-- 自定义 header -->
					<template v-slot:header>
						<view style="padding-right: 10px;"><uni-icons type="smallcircle-filled" size="20" :color="item.read ? '#D80C24' : '#CBCBCB'"></uni-icons></view>
					</template>
					<!-- 自定义 body -->
					<template v-slot:body>
						<view class="listBoxBody">
							<view>
								<view :class="item.read ? 'listBoxBodyTop' : 'listBoxBodyTopTwo'">
									<text v-if="titleLst[0].show">{{ item.adTitle }}</text>
									<text v-else>Order No.: {{ item.billCode }}</text>
								</view>
								<view :class="item.read ? 'listBoxBodyCenter' : 'listBoxBodyCenterTwo'">{{ item.adStartDate || item.pushDate }}</view>
							</view>
							<view v-show="titleLst[1].show && item.pushMessage" :class="item.read ? 'listBoxBodyBottom' : 'listBoxBodyBottomTwo'">{{ item.pushMessage }}</view>
							<!-- 							<view v-show="titleLst[2].show && item.body" :class="item.read ? 'listBoxBodyBottom' : 'listBoxBodyBottomTwo'">{{ item.body }}</view>
							<view v-show="titleLst[2].show && item.body" :class="item.read ? 'listBoxBodyBottom' : 'listBoxBodyBottomTwo'">{{ item.body }}</view>
							<view v-show="titleLst[2].show && item.body" :class="item.read ? 'listBoxBodyBottom' : 'listBoxBodyBottomTwo'">{{ item.body }}</view>
							<view v-show="titleLst[2].show && item.body" :class="item.read ? 'listBoxBodyBottom' : 'listBoxBodyBottomTwo'">{{ item.body }}</view> -->
						</view>
					</template>
					<!-- 自定义 footer-->
					<template v-slot:footer>
						<view class="listBoxFooter">
							<view :class="item.read ? 'listBoxFooterTop' : 'listBoxFooterTopTwo'">{{ item.adStartTime || item.pushTime }}</view>
							<view class="listBoxFooterBottom" @tap="lookClick(item)">{{ i18n.ctwfont48 }}</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import { getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import { lastMonthDate } from '@/utils/lastMonthDate.js';
import { clearMessage } from '@/utils/clearMessage.js'; // 浏览广告弹窗已读
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			windowHeight: 0, // 手机高
			back_k: 0,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			loading: false, // 加载
			loadingTime: '', // 定时
			cardArrList: []
		};
	},
	onShow() {
		this.getList();
		plus.runtime.setBadgeNumber(0); //清除app角标
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
				that.windowHeight = res.windowHeight;
			}
		});
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	components: { setUpPages, signOut },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		},
		topBarTwo() {
			let num = 0;
			if (this.titleLst.length >= 2) {
				num = this.windowHeight - (this.topBarHeight + 128 + 35); // 44是顶部高度
			} else {
				num = this.windowHeight - (this.topBarHeight + (this.titleLst[2].show ? 193 + 35 : 128 + 35)); // 44是顶部高度
			}

			return num + 'px';
		},
		i18n() {
			return this.$t('orderDetails');
		},
		titleLst() {
			return [
				{
					title: this.$t('orderDetails').ctwfont62,
					img: '/static/icon/superAnt/unity3d@2x(6).png',
					id: 1,
					show: true,
					num: 0
				},
				{
					title: this.$t('orderDetails').ctwfont63,
					img: '/static/icon/superAnt/unity3d@2x(5).png',
					id: 2,
					show: false,
					num: 0
				}
			];
		}
	},
	methods: {
		goHome() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
						// return plus.runtime.quit();
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						} else {
							uni.navigateBack({
								delta: 1
							});
						}
					}
				}
			}
		},
		// 切换
		titleBar(item) {
			this.cardArrList = [];
			this.titleLst.forEach(v => {
				if (v.id == item.id) {
					v.show = true;
				} else {
					v.show = false;
				}
			});
			// 重新获取数据
			this.getList();
		},
		// 付款
		paymentBoxBar(item) {
			this.paymentBoxleLst.forEach(v => {
				if (v.id == item.id) {
					v.show = true;
				} else {
					v.show = false;
				}
			});
		},
		// 获取数据
		async getList() {
			this.loading = true;
			this.loadingTime = setTimeout(() => {
				this.loading = false;
			}, 5000);

			const { data: res } = await this.$http(true, 'api/notification/data', '', 'GET');
			this.loading = false;
			clearTimeout(this.loadingTime);
			if (res.errno === 0) {
				if (res.data) {
					this.titleLst[0].num = res.data.advertisementNumber; // 广告数量
					this.titleLst[1].num = res.data.orderTrackingNumber; // 订单数量
					if (res.data.advertisementList && res.data.advertisementList.length > 0) {
						res.data.advertisementList.forEach(item => {
							if (Number(item.read) == 0) {
								item.read = true;
							} else {
								item.read = false;
							}
						});
					}

					if (res.data.orderTrackingMessageList && res.data.orderTrackingMessageList.length > 0) {
						res.data.orderTrackingMessageList.forEach(item => {
							if (Number(item.read) == 0) {
								item.read = true;
							} else {
								item.read = false;
							}
						});
					}
					const isList = this.titleLst.filter(v => v.show);
					if (isList[0].id == 1) {
						this.cardArrList = res.data.advertisementList;
					} else {
						this.cardArrList = res.data.orderTrackingMessageList;
					}
				}
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 查看
		lookClick(item) {
			const that = this;
			if (item.adImage) {
				uni.previewImage({
					current: item.adImage,
					urls: [item.adImage],
					success: res => {
						if (item.read) {
							that.readPup(item.adId);
						}
					}
				});
			} else if (item.billCode) {
				// #ifdef APP-PLUS
				uni.redirectTo({
					url: `/pages/maps/orderTracking?num=${item.billCode}&url=/pages/messageQueue/index`
				});
				// #endif
				// #ifdef H5
				this.$Router.push(`/pages/maps/orderTracking?num=${item.billCode}&url=/pages/messageQueue/index`);
				// #endif
			}
		},
		// 浏览广告弹窗已读
		async readPup(item) {
			if (item.read) {
				clearMessage(item.adId);
			}
			// const params = {
			// 	adId: id
			// };
			// const { data: res } = await this.$http(true, 'api/notification/advertisement/read', params, 'GET');
			// 重新获取数据
			this.getList();
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-list-item__container {
	padding: 10px;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #f2f2f2;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #fbfbff;
		width: 100%;
	}
}
.loadingBox {
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	// background-color: rgba(0, 0, 0, 0.5);
}
.zhuti {
	padding: 0 15px;
	box-sizing: border-box;
	background-color: #fbfbff;
	.titleBoxTopTitle {
		font-size: $uni-font-size-custom-g;
		font-weight: 700;
		color: #cd001b;
		text-align: center;
		padding-bottom: 30px;
	}
	.titleBox {
		display: flex;
		justify-content: center;
		background-color: #fbfbff;
		.titleBoxcenter {
			width: 100%;
			height: 40px;
			line-height: 40px;
			margin: 0 10rpx;
			border-radius: 20px;
			text-align: center;
			background-color: #848484;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
			font-size: $uni-font-size-custom-f;
			color: #fff;
			.titleBoxcenterTitle {
				display: flex;
				align-items: center;
				padding: 0 10px;
			}
		}
		.titleBoxcenterClick {
			color: #fff;
			background-color: #f77687;
		}
	}
	.paymentBox {
		display: flex;
		justify-content: center;
		padding: 10px;
		margin-top: 15px;
		background-color: #f2f2f2;
		border-radius: 10px;
		.paymentBoxCenter {
			width: 100%;
			height: 30px;
			line-height: 30px;
			margin: 0 15rpx;
			border-radius: 10px;
			text-align: center;
			background-color: #fff;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
			font-size: $uni-font-size-custom-f;
			color: #cbcbcb;
		}
		.paymentBoxCenterClick {
			color: #fff;
			background-color: #4c6edc;
		}
	}
	.listBigBox {
		margin-top: 20px;
		overflow-y: scroll;
		.listBox {
			width: 98%;
			border-radius: 10px;
			background-color: #fff7d5;
			// height: 90px;
			margin: 0 auto;
			margin-bottom: 20px;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
			.listBoxBody {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.listBoxBodyTop {
					font-size: $uni-font-size-custom-f;
					color: #464749;
				}
				.listBoxBodyTopTwo {
					font-size: $uni-font-size-custom-f;
					color: #cbcbcb;
				}
				.listBoxBodyCenter {
					padding-top: 5px;
					font-size: $uni-font-size-custom-e;
					color: #464749;
				}
				.listBoxBodyCenterTwo {
					padding-top: 5px;
					font-size: $uni-font-size-custom-e;
					color: #cbcbcb;
				}
				.listBoxBodyBottom {
					font-size: $uni-font-size-custom-f;
					color: #464749;
				}
				.listBoxBodyBottomTwo {
					font-size: $uni-font-size-custom-f;
					color: #cbcbcb;
				}
			}
			.listBoxFooter {
				width: 240rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: right;
				.listBoxFooterTop {
					font-size: $uni-font-size-custom-d;
					color: #464749;
				}
				.listBoxFooterTopTwo {
					font-size: $uni-font-size-custom-d;
					color: #cbcbcb;
				}
				.listBoxFooterBottom {
					font-size: $uni-font-size-custom-e;
					color: #F77687;
					text-decoration: underline;
				}
				.listBoxFooterBottomTwo {
					font-size: $uni-font-size-custom-e;
					color: #cbcbcb;
					text-decoration: underline;
				}
			}
		}
	}
}
</style>
